import { _decorator, Component, Node, Button, Sprite, Label } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { ResourceHelper } from '../../ResourceHelper';
import { i18n } from '../../../../scripts/i18n';
import { gm } from '../../../../scripts/managers/GameManager';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
import { v3 } from 'cc';
import { concat, forkJoin, Subscription } from 'rxjs';
import { nullifySubscription } from '../../../../scripts/libs/rxjs/utils';
import { UIOpacity } from 'cc';
import { instantFunc } from '../../../../scripts/libs/rxjs/cc3/CommonObservable';
const { ccclass, property } = _decorator;

@ccclass('ItemWaitingTip')
export class ItemWaitingTip extends BaseView {

    itemKey = ReactiveProperty.Create<string>(null);

    @property(Node)
    mainNode: Node = null;

    @property(Sprite)
    iconSprite: Sprite = null;

    @property(Label)
    contentLabel: Label = null;

    @property(Button)
    closeButton: Button = null;

    willBind(): void {
        this.mainNode.setScale(0, 0, 0);
        this.mainNode.getComponent(UIOpacity).opacity = 0;
    }

    useObserves() {
        return [
            this.itemKey.subscribe(this.refresh.bind(this)),
            BindButton(this.closeButton).subscribe(this.closeButtonClicked.bind(this))
        ];
    }

    _sub_anim: Subscription = null;

    onDestroyView(): void {
        nullifySubscription.call(this, '_sub_anim');
    }

    refresh() {
        nullifySubscription.call(this, '_sub_anim');
        if (this.itemKey.value != null) {
            this.iconSprite.spriteFrame = ResourceHelper.GetTpTex1Atlas().getSpriteFrame(`item_icon/${this.itemKey.value}`);
            this.contentLabel.string = i18n.t(`item.${this.itemKey.value}.use_tip`);
            this._sub_anim = concat(
                instantFunc(() => {
                    this.mainNode.active = true;
                }),
                forkJoin([
                    TweenToStart(this.mainNode, .3, { scale: v3(1, 1, 1) }, { easing: 'backOut'}),
                    TweenToStart(this.mainNode.getComponent(UIOpacity), .3, { opacity: 255 }, { easing: 'backOut' }),
                ]),
                instantFunc(() => {
                    this.closeButton.interactable = true;
                })
            ).subscribe();
        } else {
            this._sub_anim = concat(
                instantFunc(() => {
                    this.closeButton.interactable = false;
                }),
                forkJoin([
                    TweenToStart(this.mainNode, .3, { scale: v3(0, 0, 0) }, { easing: 'backIn' }),
                    TweenToStart(this.mainNode.getComponent(UIOpacity), .3, { opacity: 0 }, { easing: 'backIn' }),
                ]),
                instantFunc(() => {
                    this.mainNode.active = false;
                })
            ).subscribe();
        }
    }

    closeButtonClicked() {
        if (gm.balloonSelected.value) gm.balloonSelected.value = false;
        if (gm.swapperSelected.value) {
            gm.swapperSelected.value = false;
            gm.swapperSelectedIdx.value = null;
        }
    }
}

